<script>

  import {onMount} from 'svelte'
  import {Post} from '../lib/net.js';
  import {OtcCancel, OtcConfirm, OtcDetail} from '../api.js';
  import {FontHost} from '../conf.js';
  import Detail from '../components/detail.svelte';
  import {pop, location, querystring} from 'svelte-spa-router'

  let data = {
    transaction: {},
    asset: {
      payMethods: [],
    },
  };
  let isEnd = false;
  let lastDate = "";
  let create_date;
  let end_date;

  onMount(async () => {

    let tid = $querystring.replace("tid=", "");
    data = await Post(OtcDetail, {tid});

    let t = data.transaction;

    if ((t.type == 0 && t.state == 4) || (t.type == 1) && t.state == 3) {
      isEnd = true
    }
    create_date = t.created_on;
    create_date = (new Date(create_date)).valueOf();
    end_date = create_date + 15 * 60 * 1000;

    setTime();
  });

  function jumpPop() {
    pop();
  }

  async function confirm() {
    let tid = $querystring.replace("tid=", "");
    await Post(OtcConfirm, {tid})
    pop();
  }

  async function cancel() {
    let tid = $querystring.replace("tid=", "");
    await Post(OtcCancel, {tid})
    pop();
  }

  function setTime() {

    let dis = (end_date - Date.now()) / 1000;

    if (dis < 0) {
      lastDate = "已超时";
    } else {

      let m = Math.floor((dis / 60 % 60));
      ;
      let s = Math.floor((dis % 60));

      lastDate = m + ":" + s;
    }

    setTimeout(setTime, 1000)
  }

</script>

<div class="container">
		<div class="columns is-multiline">
				<div class="column is-4"></div>
				<!--<div class="column is-4 is-center">-->
				<!--<p class="title is-4">-->
				<!--OTC {data.transaction.type === 0 ? "购买" : "出售"}-->
				<!--</p>-->
				<!--</div>-->
				<!--<div class="column is-4"></div>-->
				<!--<div class="column is-4"></div>-->
				<!--<div class="column is-4 is-center">-->
				<!--{isEnd ? "已结束" : "等待确认"}-->
				<!--</div>-->
                {#if data.transaction.type == 1}
				<div class="column is-12"><p class=" is-4">支付方式：</p></div>
				<table class="table is-fullwidth is-bordered " style="text-align: center;border: 1px solid #eeeeee;">
						<th  style="text-align: center;border: none;">
								名称
						</th>
						<th  style="text-align: center;border: none;">
								账号
						</th>
						<th  style="text-align: center;border: none;">
								二维码/银行名称
						</th>
						<tbody  style="text-align: center;border: none;">
						{#each data.asset.payMethods as item}
						<tr  style="text-align: center;border: none;">
								<td  style="text-align: center;border: none;">
										{#if item.type == 0 }
										微信
										{:else if item.type == 1 }
										支付宝
										{:else}
										银行卡
										{/if}
								</td>
								<td  style="text-align: center;border: none;">
										{item.account}
								</td>
								<td  style="text-align: center;border: none;">
										{@html !!item.qr ? `<img width=300px; src=${FontHost}/${item.qr}>` : null || item.location || "--"}
								</td>
						</tr>
						{/each}
						</tbody>
				</table>
                {/if}
				<div class="content"></div>
				<div class="column is-3">
						单价: {(data.transaction.curreny / data.transaction.amount).toFixed(2)} USDT
				</div>
				<div class="column is-3 fontColor"></div>
				<div class="column is-3 fontColor">
						数量: {data.transaction.amount} USDT
				</div>
				<div class="column is-3 fontColor">
						总价: {data.transaction.curreny} CNY
				</div>
				<div class="column is-6">

				</div>
				<div class="column is-3">
						<button class="cancelBtn" on:click={cancel} data-id={data.transaction.tid}>
								取消订单
						</button>
				</div>
				<div class="column is-3">
						<button class="sureBtn" on:click={confirm} data-id={data.transaction.tid}>
								确认
						</button>
				</div>
		</div>
</div>

<style>
		table tr:nth-child(odd) {
				background: #FAFAFA;
				text-align: center;
		}
		.container {
				margin-top: 10px;
				padding: 100px;
				background: #fff;
		}

		.fontColor {
				font-size: 16px;
				color: #000;
		}

		.cancelBtn {
				width: 160px;
				padding: 10px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(255, 157, 30, 1);
				border-radius: 4px;
				color: #ffffff;
		}

		.sureBtn {
				width: 160px;
				padding: 10px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(49, 138, 253, 1);
				border-radius: 4px;
				color: #ffffff;
		}
</style>
